<template>
  <div
    class="box-border min-h-[100vh] w-full bg-gradient-to-b from-[#1c1717] from-[50%] via-[#391111] via-[80%] to-[#040404] to-[96%] lg:from-[30%] lg:via-[70%] lg:to-[90%] lg:py-8">
    <!--    主要内容-->
    <div class="w-full overflow-hidden px-5 text-xs text-[#fff] lg:mx-auto lg:w-[1024px]">
      <nuxt-link :to="$localePath('/')" external>
        <WImage
          alt="BitTopup Logo"
          class="cursor-pointer mb-6 mt-7 h-[auto] w-[120px] lg:mb-10 lg:mt-[80px] lg:w-[150px]"
          :src="useAsset('logo/logo@2x.png')" />
      </nuxt-link>
      <!--      big-form-info-->
      <div class="rounded-3xl lg:flex lg:flex-row-reverse lg:bg-[#673d3d42]">
        <!--        form-->
        <div class="mb-8 rounded-xl bg-[#332d2d] px-5 pb-1.5 pt-8 lg:mb-0 lg:box-border lg:w-[50%] lg:pt-16">
          <slot name="form"></slot>
          <div class="mb-10"></div>
          <div
            v-if="$route.path.includes('/sso/register')"
            @click="$softReplaceRoute({ path: '/sso/login', query: { redirectTo: $route.query?.redirectTo } })"
            class="mb-5 -mt-5 border-t-0.5 cursor-pointer hover:underline border-t-[#363b3d] pt-5 text-center text-light">
            <p>{{ $mt('Sign in using an existing account') }}</p>
          </div>
        </div>

        <!--下方信息-->
        <div
          class="text-center lg:box-border lg:flex lg:w-[50%] lg:flex-col lg:items-start lg:px-10 lg:pt-16 lg:text-left">
          <slot name="info"></slot>
        </div>
      </div>

      <!--    foot-->
      <div
        class="mt-5 border-t-[.5px] border-t-[#555252] pt-5 text-xs text-[#fff] lg:mt-10 lg:flex lg:flex-row-reverse lg:items-center lg:justify-end">
        <div class="flex flex-wrap items-center justify-center">
          <a
            target="_blank"
            :href="$localePath(item.link)"
            class="mb-1 mr-3 whitespace-nowrap cursor-pointer"
            v-for="(item, index) in footList"
            :key="item.id">
            <span class="text-white3">
              {{ item.text }}
            </span>
          </a>
        </div>
        <p class="mt-1 pb-3.5 text-center text-[#8a8f90] lg:mr-5 lg:pb-2.5">
          TOPCOSMOS TECHNOLOGY LIMITED
          <br />
          UNIT A17, 29/F, LEGEND TOWER, NO.7 SHING YIP STREET, KWUN TONG, KOWLOON, HONG KONG
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { use } from 'h3'
import WImage from '~/components/logic/WImage.vue'

const { handleContact } = useCommonPlugin()
const router = useRouter()
const { $mt } = useCommonPlugin()
const footList = ref([
  {
    id: 1,
    text: $mt('About BitTopup'),
    link: '/bittopup_about_us.html',
  },
  {
    id: 2,
    text: $mt('Support'),
    link: '/bittopup_support.html',
  },
  {
    id: 3,
    text: $mt('Contact Us'),
    link: '/contact_us_bittopup.html',
  },
  {
    id: 4,
    text: $mt('Terms of use'),
    link: '/service.html',
  },
  {
    id: 5,
    text: $mt('Privacy Policy'),
    link: '/privacy.html',
  },
])
</script>

<style scoped lang="scss">
:deep(.van-cell) {
  background-color: unset;
}

:deep(.van-cell:after) {
  display: none;
}

:deep(.van-field__control) {
  font-size: 12px;
  color: #fff;
}

:deep(.van-field__control:focus-visible) {
  outline-offset: unset;
}

:deep(.van-field__left-icon) {
  margin-right: 14px;
}
</style>
